.alert1 {
    padding: 15px;
    font: {
        size: 15px;
    }
    ;
    p {
        color: #fff;
    }
}

//@extend 继承
//父元素下面的子元素样式也会被继承
$name:"info";
.alert-#{$name} {
    @extend .alert1;
    background-color:rgba( green,0.8);
    font: {
        size: 10*2px;
    }
}
$color:(light:red, dark:#000);
div {
    color: map-get($color, light);
}
$base-color:rgba(207, 24, 125, 0.5);
.alert-danger {
    @extend .alert1;
   // background-color:lighten(red,20%);//变浅
   //background-color:darken(red,16%);//加深
  // background-color:opacify($base-color, 0.4);//减少颜色透明度
   //background-color:transparentize($base-color,0.2);//增加颜色透明度
   background-color: map-get($color, light);//增加颜色透明度
}

//多行注释时 编译会保留 单行编译不会被保留 强制注释！在生成时会保留

// #{}属性变量
span{
    width: 100px;
}

